import './App.css';

function App() {
  return (
    <div className="App">
      <div className="left flex-center-column">
        <div style={{"height":"90%"}}>
        <div className='margin-top weight-lighter'  style={{fontSize:'30px',marginTop:'1px'}}>
        免费版
      </div>
      <div className='margin-top' style={{flexDirection:'row',display:'flex',justifyContent:'center',justifyItems:'center',alignItems:'flex-end',fontSize:"24px"}}>
         <span style={{fontSize:'50px',}} >￥</span>
         <span style={{fontSize:'50px',color:'red'}} >0</span>
          <span>/年</span>
      </div>
      <div className='margin-top weight-lighter'>5人成员上限</div>
      <div className='margin-top weight-lighter'>5G容量</div>
      <div className='margin-top weight-lighter'>单文件最大100M</div>
      <div className='margin-top weight-lighter'>单项目最大1G</div>
      <div className='margin-top weight-lighter'>社区与邮件支持</div>
        </div>
        <div className='flex-center-column margin-top weight-lighter bottom box-radius' style={{textAlgin:'center',height:'35px',width:'30%',border:'solid 1px #000',marginTop:'30px'}}>
          注册使用
        </div>
      </div>
      <div className="middle flex-center-column">
        <div  style={{"height":"90%"}}>
        <div className='margin-top weight-lighter'  style={{fontSize:'30px',marginTop:'10px'}}>
        标准版
      </div>
      <div className='margin-top' style={{flexDirection:'row',fontSize:"24px",display:'flex',justifyContent:'center',justifyItems:'center',alignItems:'flex-end',}}>
          <div style={{fontSize:'50px',}} >￥</div>
          <div style={{fontSize:'50px',}} >1998</div>
          /年
      </div>
      <div className='margin-top weight-lighter'>20人成员上限</div>
      <div className='margin-top weight-lighter'>20G容量</div>
      <div className='margin-top weight-lighter'>单文件最大100M</div>
      <div className='margin-top weight-lighter'>单项目最大1G</div>
      <div className='margin-top weight-lighter'>社区与邮件支持在线与电话支持</div>
      <div className='margin-top weight-lighter'>短信通知</div> 
        </div> 
        <div className='flex-center-column margin-top weight-lighter bottom box-radius' style={{color:'white',backgroundColor:'rgb(254,197,68)',width:'30%',height:'35px'}}>购买</div>
      </div>
      <div className="right flex-center-column">
       <div style={{"height":"90%"}}>
        <div className='margin-top weight-lighter'  style={{"fontSize":'30px',"marginTop":'10px'}}>
        高级版
        </div>
      <div className='margin-top' style={{"flexDirection":'row',fontSize:"24px","display":'flex',"justifyContent":'center',"justifyItems":'center',"alignItems":'flex-end',}}>
        <div style={{"fontSize":'50px',}} >￥</div>
        <div style={{"fontSize":'50px',"color":'red'}} >3998</div>
          /年
      </div>
      <div className='margin-top weight-lighter'>5人成员上限</div>
      <div className='margin-top weight-lighter'>50G容量</div>
      <div className='margin-top weight-lighter'>单文件最大200M</div>
      <div className='margin-top weight-lighter'>单项目最大2G</div>
      <div className='margin-top weight-lighter'>社区与邮件支持在线与电话支持</div>
      <div className='margin-top weight-lighter'>短信通知</div>  
       </div>
      <div className='flex-center-column margin-top weight-lighter bottom box-radius' style={{"width":'30%',"height":'35px',"border":'solid 1px #000'}}>购买</div>
      </div>
    </div>
  );
}

export default App;
